import { useDispatch, useSelector } from "react-redux";
import axios from "axios";
import { inscrement, decrement } from "./store/modules/counterStore";
import {
  inscrementNum,
  decrementNum,
  setList,
  getList,
} from "./store/modules/shoperStore";
import { useEffect } from "react";
function App() {
  const { count } = useSelector((state) => state.counter);
  const { num, list } = useSelector((state) => state.shoper);
  const dispatch = useDispatch();
  useEffect(() => {
    // getList1();
    dispatch(getList());
  }, [dispatch]);
  const getList1 = async () => {
    const res = await axios.get("http://geek.itheima.net/v1_0/channels");
    dispatch(setList(res.data.data.channels));
  };
  return (
    <div className="App">
      <h1>redux</h1>
      <div>count:{count}</div>
      <div>num:{num}</div>
      <button onClick={() => dispatch(inscrement(2))}>count++</button>
      <button onClick={() => dispatch(decrement())}>count--</button>
      <button onClick={() => dispatch(inscrementNum(2))}>num++</button>
      <button onClick={() => dispatch(decrementNum(2))}>num--</button>
      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
